<template>
  <svg  @contextmenu.prevent=checkStateHandler($event)>
    <g :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')'" class="cursor-pointer">
      <g>
        <!--  @click="shoucheShowMenuHandler" -->
        <template v-if="!!shouCheState || shouCheState == 0">

          <g >
          <line v-if="shouCheState == 1" transform="translate(0,-0.3)" x1="-14" y1="40" x2="0" y2="40" :stroke="color" stroke-width="2"></line>
          <line v-if="shouCheState == 1" x1="26" y1="40" x2="38" y2="40" :stroke="color" stroke-width="2"></line>
<g v-if="!half">
    <g  v-if="shouCheState == 0" transform="translate(28,53) rotate(90)">
        <line x1="-14" y1="40" x2="-8" y2="48" :stroke="color" stroke-width="2" ></line>
        <line x1="-14" y1="40" x2="-8" y2="32" :stroke="color" stroke-width="2"></line>
        <g transform="translate(-5, 0)">
            <line x1="-14" y1="40" x2="-8" y2="48" :stroke="color" stroke-width="2" ></line>
            <line x1="-14" y1="40" x2="-8" y2="32" :stroke="color" stroke-width="2"></line>
        </g>

    </g>
    <g  v-else>
        <line x1="-14" y1="40" x2="-8" y2="48" :stroke="color" stroke-width="2" ></line>
        <line x1="-14" y1="40" x2="-8" y2="32" :stroke="color" stroke-width="2"></line>
        <g transform="translate(-5, 0)">
            <line x1="-14" y1="40" x2="-8" y2="48" :stroke="color" stroke-width="2" ></line>
            <line x1="-14" y1="40" x2="-8" y2="32" :stroke="color" stroke-width="2"></line>
        </g>

    </g>
</g>

          <g v-if="shouCheState == 0" :transform="`translate(${-7 + gap}, 77) rotate(270)`">
            <line x1="38" y1="40" x2="32" y2="32" :stroke="color" stroke-width="2"></line>
            <line x1="38" y1="40" x2="32" y2="48" :stroke="color" stroke-width="2"></line>
            <g transform="translate(5, 0)">
              <line x1="38" y1="40" x2="32" y2="32" :stroke="color" stroke-width="2"></line>
              <line x1="38" y1="40" x2="32" y2="48" :stroke="color" stroke-width="2"></line>
            </g>
           </g>
           <g v-else :transform="`translate(${gap},-0.3)`">
               <line x1="38" y1="40" x2="25" y2="40" :stroke="color" stroke-width="2"></line>
            <line x1="38" y1="40" x2="32" y2="32" :stroke="color" stroke-width="2"></line>
            <line x1="38" y1="40" x2="32" y2="48" :stroke="color" stroke-width="2"></line>
            <g transform="translate(5, 0)">
              <line x1="38" y1="40" x2="32" y2="32" :stroke="color" stroke-width="2"></line>
              <line x1="38" y1="40" x2="32" y2="48" :stroke="color" stroke-width="2"></line>
            </g>
           </g>



          </g>

        </template>
        <template v-else>
          <line x1="0" y1="33" x2="25" y2="47" :stroke="color" stroke-width="2"></line>
          <line x1="0" y1="47" x2="25" y2="33" :stroke="color" stroke-width="2"></line>
          <line x1="-14" y1="40" x2="0" y2="40" :stroke="color" stroke-width="2"></line>
          <line x1="26" y1="40" x2="38" y2="40" :stroke="color" stroke-width="2"></line>
          <line x1="-16" y1="35" x2="-8" y2="46" :stroke="color" stroke-width="2" ></line>
          <line x1="-8" y1="35" x2="-16" y2="46" :stroke="color" stroke-width="2"></line>
          <g transform="translate(-5, 0)">
            <line x1="-16" y1="35" x2="-8" y2="46" :stroke="color" stroke-width="2" ></line>
             <line x1="-8" y1="35" x2="-16" y2="46" :stroke="color" stroke-width="2"></line>
          </g>
          <line x1="42" y1="46" x2="34" y2="35" :stroke="color" stroke-width="2"></line>
          <line x1="42" y1="35" x2="34" y2="46" :stroke="color" stroke-width="2"></line>
          <g transform="translate(5, 0)">
            <line x1="42" y1="46" x2="34" y2="35" :stroke="color" stroke-width="2"></line>
          <line x1="42" y1="35" x2="34" y2="46" :stroke="color" stroke-width="2"></line>
          </g>
        </template>
      </g>
    </g>
    <g :transform="'translate(' + translateX + ',' + translateY + ')'" class="cursor-pointer" v-if="!!name">
      <text :x="titleX" :y="titleY" fill="#FFFFFF" font-size="12">{{name}}</text>
    </g>
  </svg>
</template>
<script>
import {submitOperateRecord} from "@/api/api";

export default {
  components: {},
  props: {
    dlqDataObj: {
      type: Object
    },
      half: {
        type: Boolean,
        default: false
      },
    shouCheDataObj: {
      type: Object
    },
    name: {
      type: String
    },
    translateX: { // x轴偏移，默认0
      type: Number,
      default: 0
    },
    translateY: { // y轴偏移，默认0
      type: Number,
      default: 0
    },
    rotate: {  // z轴旋转角度,注意不是原地旋转，需要根据x、y轴偏移来调整
      type: Number,
      default: 0
    },
    titleColor: {
      type: String,
      default: '#FFFFFF'
    },
    titleWidth: {
      type: Number,
      default: 50
    },
    titleX: {
      type: Number,
      default: -4
    },
    titleY: {
      type: Number,
      default: 27
    },
      gap: {
      type: Number,
      default: 0
    }
  },
  data(){
    return {
      shouCheState: 0,
        isMainPage:this.$store.state.isMainPage
    }
  },
  computed: {
    color() {
      return +this.shouCheState === 1 ? '#FF0000' : '#87D66E';
    }
  },
  watch: {
    shouCheDataObj: {
      handler(newValue) {
        if (newValue) {

          this.shouCheState = newValue.state_val;
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
      checkStateHandler() {
          let stateCN;
          switch (+this.shouCheState) {
              case 0:
                  stateCN = '工作';
                  break;
              case 1:
                  stateCN = '实验';
                  break;
          }
          const template = this.$store.getters.getOperDesc('jc', '开关')
          const desc = template
              ? template.replace('jgName', this.shouCheDataObj.jg_name)
                  .replace('state', stateCN)
                  .replace('devName', this.shouCheDataObj.state_desc+'手车')
              : '未知操作描述'

          submitOperateRecord({
              log_desc: desc
          })
      },
    showMenuHandler(e) {
      this.$emit('showMenuHandler', e);
    },
    shoucheShowMenuHandler(e) {
      this.$emit('showMenuHandler', {
        clientX: e.clientX,
        clientY: e.clientY,
        controlType:'sc',
        // controlName: this.name,
        // controlState: this.state,
        ...this.shouCheDataObj
      });
    },
  }
}
</script>
<style lang="less" scoped>
.cursor-pointer {
  cursor: pointer;
}
</style>
